<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>早餐记 - 健康打卡</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0A7CFF', // 华为鸿蒙蓝
                        secondary: '#36D399', // 健康绿
                        warning: '#FF9F43', // 提醒橙
                        neutral: '#F3F4F6', // 背景灰
                    },
                    fontFamily: {
                        sans: ['HarmonyOS Sans', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            }
            .btn-hover {
                transition: all 0.3s ease;
            }
            .btn-hover:hover {
                transform: translateY(-2px);
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800 min-h-screen">
    <!-- 顶部导航 -->
    <nav class="bg-white shadow-sm fixed top-0 left-0 right-0 z-10">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-cutlery text-primary text-xl"></i>
                <h1 class="text-lg font-semibold text-primary">早餐记</h1>
            </div>
            <div class="flex space-x-4">
                <button id="historyBtn" class="text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-history"></i>
                </button>
                <button id="statsBtn" class="text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-bar-chart"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 pt-20 pb-16">
        <!-- 打卡面板（默认显示） -->
        <section id="checkinPanel" class="mt-8">
            <div class="bg-white rounded-2xl p-6 card-shadow">
                <div class="text-center mb-4">
                    <h2 class="text-lg font-semibold mb-2">选择日期进行打卡</h2>
                    <p class="text-gray-500 mb-1" id="currentDate">2024年5月15日 星期三</p>
                </div>

                <!-- 日历控件 -->
                <div class="mb-6" id="calendarContainer">
                    <div class="flex justify-between items-center mb-4">
                        <button id="prevMonth" class="text-gray-600 hover:text-primary">
                            <i class="fa fa-chevron-left"></i>
                        </button>
                        <h3 class="text-lg font-medium" id="currentMonth">2024年5月</h3>
                        <button id="nextMonth" class="text-gray-600 hover:text-primary">
                            <i class="fa fa-chevron-right"></i>
                        </button>
                    </div>
                    
                    <!-- 星期头部 -->
                    <div class="grid grid-cols-7 gap-1 mb-2 text-center text-sm text-gray-500 font-medium">
                        <div>日</div>
                        <div>一</div>
                        <div>二</div>
                        <div>三</div>
                        <div>四</div>
                        <div>五</div>
                        <div>六</div>
                    </div>
                    
                    <!-- 日期网格 -->
                    <div id="calendarDays" class="grid grid-cols-7 gap-1 text-center">
                        <!-- 日历日期将通过JS动态生成 -->
                    </div>
                </div>

                <!-- 打卡详情 -->
                <div id="checkinDetails" class="mb-4 hidden">
                    <h3 class="text-sm text-gray-600 mb-2">打卡详情</h3>
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <button id="calendarAteBtn" class="bg-secondary text-white py-3 rounded-lg font-medium btn-hover flex flex-col items-center justify-center">
                            <i class="fa fa-check-circle mb-1"></i>
                            已吃早餐
                        </button>
                        <button id="calendarNotAteBtn" class="bg-gray-200 text-gray-700 py-3 rounded-lg font-medium btn-hover flex flex-col items-center justify-center">
                            <i class="fa fa-times-circle mb-1"></i>
                            未吃早餐
                        </button>
                    </div>
                    <div>
                        <label for="calendarNotes" class="block text-sm text-gray-600 mb-2">备注（可选）</label>
                        <textarea id="calendarNotes" rows="2" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="例如：面包+牛奶、赶时间没吃..."></textarea>
                    </div>
                </div>

                <!-- 连续打卡提示 -->
                <div id="streakTip" class="mt-6 p-3 bg-primary/10 rounded-lg text-center text-primary hidden">
                    <i class="fa fa-fire mr-1"></i>
                    <span>已连续吃早餐 <strong id="streakCount">3</strong> 天，继续加油！</span>
                </div>
            </div>

            <!-- 桌面快捷提示 -->
            <div class="mt-4 bg-primary/5 p-4 rounded-lg text-sm text-gray-600 flex items-center">
                <i class="fa fa-lightbulb-o text-primary mr-2"></i>
                <p>提示：添加桌面卡片，一键打卡更快捷</p>
            </div>
        </section>

        <!-- 历史记录面板（默认隐藏） -->
        <section id="historyPanel" class="mt-8 hidden">
            <div class="flex items-center mb-4">
                <button id="backFromHistory" class="text-gray-600 hover:text-primary mr-2">
                    <i class="fa fa-arrow-left"></i>
                </button>
                <h2 class="text-lg font-semibold">打卡历史</h2>
            </div>

            <div class="bg-white rounded-2xl card-shadow overflow-hidden">
                <div id="historyList" class="divide-y">
                    <!-- 历史记录项示例 -->
                    <div class="p-4 flex justify-between items-center">
                        <div>
                            <p class="font-medium">2024年5月14日</p>
                            <p class="text-sm text-gray-500">早餐：包子+豆浆</p>
                        </div>
                        <span class="px-3 py-1 bg-secondary/20 text-secondary rounded-full text-sm">已吃</span>
                    </div>
                    <div class="p-4 flex justify-between items-center">
                        <div>
                            <p class="font-medium">2024年5月13日</p>
                            <p class="text-sm text-gray-500">备注：赶早会没吃</p>
                        </div>
                        <span class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm">未吃</span>
                    </div>
                </div>

                <!-- 空状态 -->
                <div id="historyEmpty" class="py-16 text-center hidden">
                    <i class="fa fa-calendar-o text-gray-300 text-4xl mb-3"></i>
                    <p class="text-gray-500">暂无打卡记录</p>
                </div>
            </div>
        </section>

        <!-- 数据统计面板（默认隐藏） -->
        <section id="statsPanel" class="mt-8 hidden">
            <div class="flex items-center mb-4">
                <button id="backFromStats" class="text-gray-600 hover:text-primary mr-2">
                    <i class="fa fa-arrow-left"></i>
                </button>
                <h2 class="text-lg font-semibold">健康统计</h2>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <!-- 本周统计卡片 -->
                <div class="bg-white rounded-2xl p-5 card-shadow">
                    <h3 class="text-gray-600 text-sm mb-3">本周早餐达标率</h3>
                    <div class="flex items-end justify-between">
                        <div class="text-3xl font-bold text-primary">71%</div>
                        <div class="text-sm text-gray-500">5/7天</div>
                    </div>
                    <canvas id="weekChart" class="mt-4 w-full h-40"></canvas>
                </div>

                <!-- 本月统计卡片 -->
                <div class="bg-white rounded-2xl p-5 card-shadow">
                    <h3 class="text-gray-600 text-sm mb-3">本月早餐达标率</h3>
                    <div class="flex items-end justify-between">
                        <div class="text-3xl font-bold text-primary">65%</div>
                        <div class="text-sm text-gray-500">13/20天</div>
                    </div>
                    <canvas id="monthChart" class="mt-4 w-full h-40"></canvas>
                </div>
            </div>

            <!-- 最长连续记录 -->
            <div class="bg-white rounded-2xl p-5 card-shadow">
                <h3 class="text-gray-600 text-sm mb-3">最佳记录</h3>
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">最长连续吃早餐</p>
                        <p class="text-2xl font-bold">5天</p>
                    </div>
                    <div class="bg-primary/10 p-3 rounded-full">
                        <i class="fa fa-trophy text-primary text-xl"></i>
                    </div>
                </div>
            </div>
        </section>

        <!-- 设置面板（默认隐藏） -->
        <section id="settingsPanel" class="mt-8 hidden">
            <div class="flex items-center mb-4">
                <button id="backFromSettings" class="text-gray-600 hover:text-primary mr-2">
                    <i class="fa fa-arrow-left"></i>
                </button>
                <h2 class="text-lg font-semibold">设置</h2>
            </div>

            <div class="bg-white rounded-2xl p-6 card-shadow">
                <div class="space-y-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-medium">提醒设置</h3>
                            <p class="text-sm text-gray-500">开启每日早餐提醒</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" id="reminderToggle" class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                        </label>
                    </div>

                    <div id="reminderTimeContainer" class="hidden pl-4 border-l-2 border-gray-100">
                        <div class="flex items-center justify-between mb-2">
                            <label for="reminderTime" class="text-sm text-gray-600">提醒时间</label>
                            <select id="reminderTime" class="bg-gray-50 border border-gray-200 text-gray-700 py-2 px-3 pr-8 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 text-sm">
                                <option value="07:00">07:00</option>
                                <option value="07:30">07:30</option>
                                <option value="08:00" selected>08:00</option>
                                <option value="08:30">08:30</option>
                                <option value="09:00">09:00</option>
                            </select>
                        </div>
                    </div>

                    <div class="border-t border-gray-100 pt-6">
                        <h3 class="font-medium mb-4">主题设置</h3>
                        <div class="grid grid-cols-3 gap-3">
                            <button class="theme-option w-full h-12 rounded-lg bg-primary flex items-center justify-center text-white font-medium" data-theme="primary">
                                默认蓝
                            </button>
                            <button class="theme-option w-full h-12 rounded-lg bg-secondary flex items-center justify-center text-white font-medium" data-theme="secondary">
                                健康绿
                            </button>
                            <button class="theme-option w-full h-12 rounded-lg bg-warning flex items-center justify-center text-white font-medium" data-theme="warning">
                                活力橙
                            </button>
                        </div>
                    </div>

                    <div class="border-t border-gray-100 pt-6">
                        <h3 class="font-medium mb-4">数据管理</h3>
                        <button id="exportDataBtn" class="w-full py-3 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors flex items-center justify-center">
                            <i class="fa fa-download mr-2"></i>导出数据
                        </button>
                        <button id="clearDataBtn" class="w-full py-3 mt-3 text-red-500 hover:bg-red-50 transition-colors rounded-lg flex items-center justify-center">
                            <i class="fa fa-trash mr-2"></i>清除所有数据
                        </button>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 底部导航 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 py-2">
        <div class="container mx-auto grid grid-cols-4 gap-1">
            <button id="navCheckin" class="flex flex-col items-center py-1 text-primary">
                <i class="fa fa-home text-lg"></i>
                <span class="text-xs mt-1">首页</span>
            </button>
            <button id="navHistory" class="flex flex-col items-center py-1 text-gray-500">
                <i class="fa fa-history text-lg"></i>
                <span class="text-xs mt-1">历史</span>
            </button>
            <button id="navStats" class="flex flex-col items-center py-1 text-gray-500">
                <i class="fa fa-bar-chart text-lg"></i>
                <span class="text-xs mt-1">统计</span>
            </button>
            <button id="navSettings" class="flex flex-col items-center py-1 text-gray-500">
                <i class="fa fa-cog text-lg"></i>
                <span class="text-xs mt-1">设置</span>
            </button>
        </div>
    </footer>

    <!-- 打卡成功弹窗 -->
    <div id="successModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-2xl p-6 w-64 text-center">
            <div class="w-16 h-16 bg-secondary/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-check text-2xl text-secondary"></i>
            </div>
            <h3 class="font-semibold text-lg mb-2">打卡成功</h3>
            <p class="text-gray-500 text-sm mb-4">已记录你的早餐情况</p>
            <button id="closeModal" class="bg-primary text-white w-full py-2 rounded-lg">确定</button>
        </div>
    </div>

    <script>
        // 初始化日期显示
        const today = new Date();
        const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
        document.getElementById('currentDate').textContent = today.toLocaleDateString('zh-CN', options);

        // 面板切换逻辑
        const checkinPanel = document.getElementById('checkinPanel');
        const historyPanel = document.getElementById('historyPanel');
        const statsPanel = document.getElementById('statsPanel');
        const settingsPanel = document.getElementById('settingsPanel');

        function showCheckin() {
            checkinPanel.classList.remove('hidden');
            historyPanel.classList.add('hidden');
            statsPanel.classList.add('hidden');
            settingsPanel.classList.add('hidden');
            updateNavActive('navCheckin');
        }

        function showHistory() {
            checkinPanel.classList.add('hidden');
            historyPanel.classList.remove('hidden');
            statsPanel.classList.add('hidden');
            settingsPanel.classList.add('hidden');
            updateNavActive('navHistory');
        }

        function showStats() {
            checkinPanel.classList.add('hidden');
            historyPanel.classList.add('hidden');
            statsPanel.classList.remove('hidden');
            settingsPanel.classList.add('hidden');
            updateNavActive('navStats');
        }

        function showSettings() {
            checkinPanel.classList.add('hidden');
            historyPanel.classList.add('hidden');
            statsPanel.classList.add('hidden');
            settingsPanel.classList.remove('hidden');
            updateNavActive('navSettings');
        }

        function updateNavActive(activeId) {
            ['navCheckin', 'navHistory', 'navStats', 'navSettings'].forEach(id => {
                const el = document.getElementById(id);
                if (id === activeId) {
                    el.classList.add('text-primary');
                    el.classList.remove('text-gray-500');
                } else {
                    el.classList.remove('text-primary');
                    el.classList.add('text-gray-500');
                }
            });
        }

        // 导航事件绑定
        document.getElementById('historyBtn').addEventListener('click', showHistory);
        document.getElementById('statsBtn').addEventListener('click', showStats);
        document.getElementById('backFromHistory').addEventListener('click', showCheckin);
        document.getElementById('backFromStats').addEventListener('click', showCheckin);
        document.getElementById('backFromSettings').addEventListener('click', showCheckin);
        document.getElementById('navCheckin').addEventListener('click', showCheckin);
        document.getElementById('navHistory').addEventListener('click', showHistory);
        document.getElementById('navStats').addEventListener('click', showStats);
        document.getElementById('navSettings').addEventListener('click', showSettings);

        // 日历打卡功能
        let currentDate = new Date();
        let selectedDate = null;
        // 模拟打卡数据
        let checkinData = {
            '2024-05-14': { status: 'ate', notes: '包子+豆浆' },
            '2024-05-13': { status: 'notAte', notes: '赶早会没吃' },
            '2024-05-12': { status: 'ate', notes: '面包+牛奶' },
            '2024-05-11': { status: 'ate', notes: '油条+豆浆' },
            '2024-05-10': { status: 'ate', notes: '煎饼果子' },
        };

        // 初始化日历
        function initCalendar() {
            renderCalendar(currentDate);

            // 绑定月份切换事件
            document.getElementById('prevMonth').addEventListener('click', () => {
                currentDate.setMonth(currentDate.getMonth() - 1);
                renderCalendar(currentDate);
            });

            document.getElementById('nextMonth').addEventListener('click', () => {
                currentDate.setMonth(currentDate.getMonth() + 1);
                renderCalendar(currentDate);
            });

            // 绑定打卡按钮事件
            document.getElementById('calendarAteBtn').addEventListener('click', () => {
                if (selectedDate) {
                    handleCalendarCheckin('ate');
                }
            });

            document.getElementById('calendarNotAteBtn').addEventListener('click', () => {
                if (selectedDate) {
                    handleCalendarCheckin('notAte');
                }
            });
        }

        // 渲染日历
        function renderCalendar(date) {
            const year = date.getFullYear();
            const month = date.getMonth();

            // 更新月份标题
            document.getElementById('currentMonth').textContent = `${year}年${month + 1}月`;

            const calendarDays = document.getElementById('calendarDays');
            calendarDays.innerHTML = '';

            // 获取当月第一天是星期几
            const firstDay = new Date(year, month, 1).getDay();

            // 获取当月的天数
            const daysInMonth = new Date(year, month + 1, 0).getDate();

            // 添加上个月的占位天数
            for (let i = 0; i < firstDay; i++) {
                const emptyDay = document.createElement('div');
                emptyDay.classList.add('text-gray-200', 'py-2');
                calendarDays.appendChild(emptyDay);
            }

            // 添加当月的天数
            for (let day = 1; day <= daysInMonth; day++) {
                const dayElement = document.createElement('div');
                dayElement.classList.add('py-2', 'rounded-full', 'cursor-pointer', 'transition-colors');

                const currentDateString = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
                const isToday = new Date().toDateString() === new Date(year, month, day).toDateString();
                const isCheckedIn = checkinData[currentDateString] !== undefined;

                // 设置样式
                if (isToday) {
                    dayElement.classList.add('bg-primary/10', 'text-primary', 'font-medium');
                }

                if (isCheckedIn) {
                    const checkinStatus = checkinData[currentDateString].status;
                    if (checkinStatus === 'ate') {
                        dayElement.classList.add('bg-secondary/20', 'text-secondary');
                    } else {
                        dayElement.classList.add('bg-gray-200', 'text-gray-700');
                    }
                }

                // 点击事件
                dayElement.addEventListener('click', () => {
                    // 移除其他日期的选中状态
                    document.querySelectorAll('#calendarDays > div').forEach(el => {
                        if (!el.classList.contains('text-gray-200')) {
                            el.classList.remove('ring-2', 'ring-primary');
                        }
                    });

                    // 添加当前日期的选中状态
                    dayElement.classList.add('ring-2', 'ring-primary');
                    selectedDate = currentDateString;

                    // 显示打卡详情
                    document.getElementById('checkinDetails').classList.remove('hidden');

                    // 填充已有数据
                    if (isCheckedIn) {
                        document.getElementById('calendarNotes').value = checkinData[currentDateString].notes || '';
                    } else {
                        document.getElementById('calendarNotes').value = '';
                    }
                });

                dayElement.textContent = day;
                calendarDays.appendChild(dayElement);
            }
        }

        // 处理日历打卡
        function handleCalendarCheckin(status) {
            if (!selectedDate) return;

            const notes = document.getElementById('calendarNotes').value;
            checkinData[selectedDate] = { status, notes };

            // 显示成功弹窗
            document.getElementById('successModal').classList.remove('hidden');

            // 重新渲染日历
            renderCalendar(currentDate);

            // 重置表单
            document.getElementById('calendarNotes').value = '';
        }

        // 打卡成功弹窗关闭
        document.getElementById('closeModal').addEventListener('click', () => {
            document.getElementById('successModal').classList.add('hidden');
        });

        // 设置页面功能
        function initSettings() {
            // 提醒开关
            const reminderToggle = document.getElementById('reminderToggle');
            const reminderTimeContainer = document.getElementById('reminderTimeContainer');

            reminderToggle.addEventListener('change', () => {
                if (reminderToggle.checked) {
                    reminderTimeContainer.classList.remove('hidden');
                } else {
                    reminderTimeContainer.classList.add('hidden');
                }
            });

            // 主题切换
            document.querySelectorAll('.theme-option').forEach(option => {
                option.addEventListener('click', () => {
                    const theme = option.getAttribute('data-theme');
                    // 这里可以添加主题切换逻辑
                    alert(`已切换到${option.textContent.trim()}主题`);
                });
            });

            // 导出数据
            document.getElementById('exportDataBtn').addEventListener('click', () => {
                // 这里可以添加导出数据逻辑
                alert('数据导出功能已触发');
            });

            // 清除数据
            document.getElementById('clearDataBtn').addEventListener('click', () => {
                if (confirm('确定要清除所有数据吗？此操作不可恢复。')) {
                    // 这里可以添加清除数据逻辑
                    checkinData = {};
                    renderCalendar(currentDate);
                    alert('所有数据已清除');
                }
            });
        }

        // 初始化图表
        function initCharts() {
            // 本周图表
            new Chart(document.getElementById('weekChart'), {
                type: 'bar',
                data: {
                    labels: ['一', '二', '三', '四', '五', '六', '日'],
                    datasets: [{
                        label: '是否吃早餐',
                        data: [1, 1, 0, 1, 1, 1, null], // 1=吃 0=没吃 null=未打卡
                        backgroundColor: [
                            '#36D399', '#36D399', '#E5E7EB', 
                            '#36D399', '#36D399', '#36D399', '#E5E7EB'
                        ],
                        borderRadius: 4,
                        barThickness: 24,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        y: { display: false, min: 0, max: 1 },
                        x: { grid: { display: false } }
                    }
                }
            });

            // 本月图表
            new Chart(document.getElementById('monthChart'), {
                type: 'doughnut',
                data: {
                    labels: ['已吃', '未吃'],
                    datasets: [{
                        data: [13, 7],
                        backgroundColor: ['#36D399', '#E5E7EB'],
                        borderWidth: 0,
                        cutout: '70%'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { position: 'bottom' } }
                }
            });
        }

        // 页面加载完成后初始化
        window.addEventListener('load', () => {
            initCalendar();
            initSettings();
            initCharts();
        });
    </script>
</body>
</html>
